{include file="common/header"}
{include file="set/form"}
<div id="app" v-cloak>
    <el-curd
        :field="field"
        :search-date="false"
        :table-sort="{prop: 'id', order: 'desc'}"
        :search-status="[{label: '正常', value: 1}, {label: '屏蔽', value: 0}]"
        save-title="新增留言表单"
        form-label-width="150px">
    </el-curd>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                field: [
                    {
                        label: '基本信息',
                        field: [
                            {
                                prop: 'id', 
                                label: '编号',    
                                table: {sort: true},
                            },
                            {
                                prop: 'name', 
                                label: '表单名称',
                                table:{sort: true},
                                form: {
                                    rules: [{required: true, message: '表单名不能为空'}]
                                }
                            },
                            {
                                prop: 'group_id', 
                                label: '提交权限',
                                table: false,
                                form: {
                                    is: 'el-select', 
                                    child: {is: 'el-option',value: {:json_encode($group)}, props:{label: 'title', value: 'id'}},
                                    default: [],
                                    multiple: true,
                                    placeholder: '不设置权限则留空',
                                },
                            },
                            {
                                prop: 'interval', 
                                label: '提交间隔（秒）',
                                table: false,
                                form: {
                                    type: 'number',
                                    default: 1,
                                    placeholder: '单位：秒',
                                }
                            },
                            {
                                prop: 'email', 
                                label: '接收邮箱', 
                                table: false,
                                form: {
                                    tips: '用户留言成功后，将内容转发到指定邮箱'
                                }
                            },
                            {
                                prop: 'captcha', 
                                label: '开启验证码',
                                table: {is: 'el-switch', sort: true},
                                form: {
                                    is: 'el-switch',
                                    default: 1,
                                    activeText: '开启',
                                    inactiveText: '关闭',
                                }
                            },
                            {
                                prop: 'status', 
                                label: '是否开启',
                                table: {is: 'el-switch', sort: true},
                                form: {
                                    is: 'el-switch',
                                    default: 1,
                                    activeText: '开启',
                                    inactiveText: '关闭',
                                }
                            },
                        ]
                    },
                    {
                        label: '表单信息',
                        field: [
                            {
                                prop: 'field', 
                                label: '', 
                                table: false,
                                form: {
                                    labelWidth: '0px',
                                    is: 'el-form-field',
                                    default: [],
                                }
                            },
                        ],
                    }
                ]
            }
        },
    })
</script>
{include file="common/footer"}